import { isRef, ref, unref, watchEffect } from 'vue'

/**
 * url - 可能是一个url字符串，也可能是一个 Ref<String> ,需要实现
 *  1. 如果是 url字符串，那么直接调用接口
 *  2. 如果是 Ref<string> , 那么直接调用接口的同时，还得监听 该 url 的变化，在变化之后再次调用接口
 */
export default function useFetch(url) {
  // 定义两个数据
  const data = ref(null) // 用于表示接口返回的需要的数据
  const error = ref(null) // 用于表示接口调用的失败

  function doFetch() {
    fetch(unref(url))
      .then((response) => response.json())
      .then((resp) => {
        console.log(resp) // []

        data.value = resp
      })
      .catch((err) => {
        console.log('catch', err)
        error.value = err
      })
  }

  if (isRef(url)) {
    // 是 ref 数据，就做监听
    watchEffect(doFetch)
  } else {
    // 直接调用一次
    doFetch()
  }

  return {
    data,
    error,
  }
}
